<template>
    <div class="nav-t">
       <div class="nav-bor">
        <ul class="list">
            <li :class="bul==1?'deft':''" @click="clic(1)">推荐</li>
            <li :class="bul==2?'deft':''" @click="clic(2)">关注</li>
            <li :class="bul==3?'deft':''" @click="clic(3)" @mouseenter="hov(3)" @mouseleave="leave">后端<div v-if="lis==3"><span v-for="(item,i) in subdata[2]" :key="i">{{item}}</span></div></li>
            <li :class="bul==4?'deft':''" @click="clic(4)" @mouseenter="hov(4)" @mouseleave="leave">前端<div v-if="lis==4"><span v-for="(item,i) in subdata[3]" :key="i">{{item}}</span></div></li>
            <li :class="bul==5?'deft':''" @click="clic(5)" @mouseenter="hov(5)" @mouseleave="leave">Android<div v-if="lis==5"><span v-for="(item,i) in subdata[4]" :key="i">{{item}}</span></div></li>
            <li :class="bul==6?'deft':''" @click="clic(6)" @mouseenter="hov(6)" @mouseleave="leave">iOs<div v-if="lis==6"><span v-for="(item,i) in subdata[5]" :key="i">{{item}}</span></div></li>
            <li :class="bul==7?'deft':''" @click="clic(7)" @mouseenter="hov(7)" @mouseleave="leave">人工智能<div v-if="lis==7"><span v-for="(item,i) in subdata[6]" :key="i">{{item}}</span></div></li>
            <li :class="bul==8?'deft':''" @click="clic(8)" @mouseenter="hov(8)" @mouseleave="leave">开发工具<div v-if="lis==8"><span v-for="(item,i) in subdata[7]" :key="i">{{item}}</span></div></li>
            <li :class="bul==9?'deft':''" @click="clic(9)" @mouseenter="hov(9)" @mouseleave="leave">代码人生<div v-if="lis==9"><span v-for="(item,i) in subdata[8]" :key="i">{{item}}</span></div></li>
            <li :class="bul==10?'deft':''" @click="clic(10)" @mouseenter="hov(10)" @mouseleave="leave">阅读<div v-if="lis==10"><span v-for="(item,i) in subdata[9]" :key="i">{{item}}</span></div></li>
        </ul>
        </div>
        <ul class="list-t">
            <li v-for="(item,i) in subdata[bul-1]" :key="i" :class="bult==i+1?'deftt':''" @click="clict(i+1)">{{item}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bul:1,     //在那一页0.
            bult:1,
            subdata:[[],[],
               ["全部","Java","后端","Spring Boot","Go","Python","MySql","Spring","Redis","JVM","数据库","算法","架构","Linux","设计模式","Spring Cloud"],
               ["全部","JavaScript","前端","Vue.js","React.js","CSS","Node.js","Webpack","面试","微信小程序","TypeScript","Flutter","前端框架","浏览器","算法","ECMAScript 6"],
               ["全部","Android","Flutter","Kotlin","Java","源码","Android Jetpack","gradle","面试","性能优化","GitHub","Google","架构","Android Studio","开源","RxJava"],
               ["全部","iOS","Swift","Objective-C","Flutter","OpenGL","SwiftUI","Apple","Xcode","RxSwift","算法","面试","设计模式","逆向","CocoaPods","性能优化"],
               ["全部","人工智能","机器学习","深度学习","算法","Python","TensorFlow","神经网络","NLP","计算机视觉","数据分析","GitHub","Google","掘金翻译计划","PyTorch","Keras"],
               ["全部","Git","GitHub","Linux","Visual Studio Code","数据库","前端","Python","Java","IntelliJ IDEA","程序员","命令行","开源","Chrome","Serverless","Docker"],
               ["全部","程序员","Java","Python","算法","前端","年终总结","后端","代码规范","Linux","数据结构","编程语言","面试","架构","大数据","测试"],
               ["全部","Java","程序员","运维","前端","算法","JavaScript","Python","Linux","面试","Kubernetes","Android","数据库","Flutter","Docker","后端"],
               ],
            wu:0 ,
            lis:0,
        }
    },
    methods:{
        clic(val){//在那一页
                this.bul=val
                this.bult=1
        },
        clict(val){//在那一页
                this.bult=val
        },
    
        hov(val){
            this.lis=val
        },
        leave(){
            this.lis=0
        }
    }
}
</script>
<style lang="scss" scoped>
.list li div{
    position: absolute;
    z-index: 2;
    background: white;
    width: 350px;
    color: #909090;
    display: flex;
    flex-wrap:wrap;
    padding: 10px 20px;
    box-shadow: 0px 0px 5px #888888;
}
.list li div span{
     font-size: 14px;
    line-height: 30px;
    
    padding: 0 10px;
    transition: all .2s;
    margin-right:10px ;
    margin-top:10px ;
    border-radius:20px ;
    background: #f7f5f5;
}
.list li div span:hover{
    color: #007fff;
}
.nav-t{
    width: 100%;  
    height: 45px;
    background: white;
}
.nav-bor{
    width: 100%; 
    background: white;
    border: 1px solid rgb(232, 235, 238);
    box-sizing: border-box; 
    position: fixed;
    z-index: 10;
}
.nav-t .list{
    width: 960px;
    min-width: 960px;
    background: white;
    /* height: 45px; */
    margin: auto;
    position: relative;
}
.nav-t .list::after{
    content:"";
    display: block;
    height:0;
    visibility:hidden;
    clear: both;
}
.nav-t .list li{
    font-size: 14px;
    line-height: 45px;
    float: left;
    color: #909090;
    padding: 0 10px;
    transition: all .2s;
    background: white;
}
.nav-t ul li:hover{
     cursor:pointer;
     color: #007fff;
}
.nav-t ul .deft{
    color: #007fff;
}
.nav-t ul .deftt{
    background: #007fff;
    color:white;
    
    &:hover {
        background-color: #fff !important;
    }
}
.list-t{
    width: 960px;
    min-width: 960px;
    margin: auto;
    padding-top:45px ;
   
}
.list-t li{
    position: relative;
    float: left;
    font-size: 14px;
    line-height: 30px;
    color: #909090;
    padding: 0 10px;
    transition: all .2s;
    margin-right:10px ;
    margin-top:10px ;
    border-radius:20px ;
    background: white;
}

.list-t::after{
    content:"";
    display: block;
    height:0;
    visibility:hidden;
    clear: both;
}
</style>